import { Component, OnInit, ViewChild } from '@angular/core';
// 导入文件数据的模型文件
import { FileItemModel } from './file.model';

import { HttpClient } from '@angular/common/http'

// 声明jquery，目的：在ts环境中可以使用js；
declare const $: any;

@Component({
  selector: 'app-upload2',
  templateUrl: './upload2.component.html',
  styleUrls: ['./upload2.component.css']
})
export class Upload2Component implements OnInit {

  constructor(
    public http:HttpClient
  ) { }

  ngOnInit() {
  }


  // 定义文件数组
  fileData: FileItemModel[] = [];

  // 获取文件上传的inputHTML元素
  @ViewChild('filesMulti', { static: true }) private fileMulti: any;

  // 当选择本地文件后触发此方法
  fileChange() {

    // 获取选中的文件数组
    const t_files = this.fileMulti.nativeElement.files;
    console.log(t_files)
    console.log(t_files.duration)

    const fileThis = this;
    for (let i = 0; i < t_files.length; i++) {
      const fileItem: FileItemModel = new FileItemModel();
      fileItem.fileName = t_files[i].name;
      fileItem.file = t_files[i];
      fileItem.status = '未上传';
      fileThis.fileData.push(fileItem);
    }

    // 清空html中file的显示信息
    $(this.fileMulti.nativeElement).val('');
  }

  // 删除选择的本地文件
  fileDel(name: string) {
    for (let i = 0; i < this.fileData.length; i++) {
      if (this.fileData[i].fileName === name) {
        this.fileData.splice(i, 1);
      }
    }
  }


  // 单个文件上传

  fileUpload(file, index) {

    // 构造参数
    const formData = new FormData();
    formData.append('file', file, file.name);

    // 上传至服务器
    this.http.post('/file/upload', formData).subscribe((data: any) => {
      if (data.success && data.errcode === 2000) { // 如果上传成功

        // 此文件状态改为已上传
        this.fileData[index].status = '已上传';

        // 文件名称改为服务器返回的文件名
        this.fileData[index].fileName = data.data.fileName;

        // 记录文件的ID
        this.fileData[index].fileId = data.data.fileId;
      } else {

        // 将此文件的文件状态改为‘上传失败’
        this.fileData[index].status = '上传失败';
      }
    });
  }

}